<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">已完成订单</view>
		<uni-card class="card">
			<view class="items_top">
				<view class="top_title">
					<view class="title_left">
						订单信息
					</view>
					<view class="title_right">
						已完成
					</view>
				</view>
				<view class="items_top_con">
					<view class="top_con_item">
						订单号：121212111131
					</view>
					<view class="top_con_item">
						服务项目：车辆保养
					</view>
					<view class="top_con_item">
						服务门店：大宝车辆维修店
					</view>
					<view class="top_con_item">
						下单时间：2023-03-08 17:40
					</view>
					<view class="top_con_item">
						预约时间：2023-03-08 17:40
					</view>
					<view class="top_con_item">
						车辆：奔驰FWE4/豫A98FHJ
					</view>
					<view class="top_con_item" style="height: 100rpx;">
						备注：
					</view>
				</view>
			</view>
			<view class="items_mid">
				<view class="title_left" style="border-bottom: 2px solid lightgray;padding: 0 0 10rpx 0;">
					订单详情
				</view>
				<view class="items_mid_con">
					<view class="mid_con_item">
						<view class="mid_con_item_left">
							车辆精洗
						</view>
						<view class="mid_con_item_right">
							¥39.90
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 1px solid lightgray;padding: 0 0 10rpx 0;">
						<view class="mid_con_item_left">
							车辆附加费用
						</view>
						<view class="mid_con_item_right">
							0
						</view>
					</view>
					<view class="mid_con_item">
						<view class="mid_con_item_left">
							原价
						</view>
						<view class="mid_con_item_right">
							¥59.90
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 1px solid lightgray;padding: 0 0 10rpx 0;">
						<view class="mid_con_item_left">
							店家优惠
						</view>
						<view class="mid_con_item_right" style="color: red;">
							-¥20
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 2px solid lightgray;padding: 0 0 20rpx 0;">
						<view class="mid_con_item_left">
							优惠券
						</view>
						<view class="mid_con_item_right" style="color: red;">
							-¥10
						</view>
					</view>
					<view class="mid_con_bottom">
						<view class="mid_con_bottom_left">
							支付金额
						</view>
						<view class="mid_con_bottom_right">
							¥29.9
						</view>
					</view>
				</view>
			</view>
			<view class="items_bottom">
				
			</view>
		</uni-card>
		<uni-card class="card2">
			<view class="title_left" style="border-bottom: 2px solid lightgray;padding: 0 0 10rpx 0;">
				评价结果
			</view>
			<view class="items_bottom_con">
				<view class="bottom_con_item mb20 mt20">
					评价时间：2023-04-10 11:09
				</view>
				<view class="bottom_con_item mb20">
					<view class="jieguo">
						评价结果：
					</view>
					<uni-rate v-model="rateValue" @change="onChange" size="18" />
				</view>
				<view class="bottom_con_item mb20">
					评语：巴拉巴拉比巴拉巴拉
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const rateValue = ref(0);
	
	function backPage(){
		uni.navigateBack()
	}
	
	onMounted(() => {
		// 模拟动态赋值
		setTimeout(() => {
			rateValue.value = 3;
		}, 1000);
	});
	
	const onChange = (e) => {
		console.log('rate发生改变:' + JSON.stringify(e));
	};
</script>

<style>
@import url('@/common/app.css');
.mb20 {
margin-bottom: 20rpx;
}
.mt20{
  margin-top: 20rpx;
}

.card {
margin: 0;
height: 1100rpx;
}
.card2{
  margin: 0;
  height: 300rpx;
}
.top_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid lightgray;
  padding: 10rpx 0;
}
.items_top_con{
  color: #575757;
  font-weight: 500;
}
.title_left{
  color: black;
  font-size: 30rpx;
  font-weight: 700;
}
.title_right{
  color: red;
  
}
.top_con_item{
  margin: 20rpx 0;
}
.items_mid_con{
  font-weight: 500;
}
.mid_con_item{
  display: flex;
  justify-content: space-between;
  align-items: center;
   margin: 20rpx 0;
}
.mid_con_bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mid_con_bottom_right{
  color: black;
  font-size: 34rpx;
  font-weight: 700;
 
}
.bottom_con_item{
  display: flex;
  justify-content: start;
  align-items: center;
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	
</style>
